<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title>我的订单</title>
		<link type="text/css" rel="stylesheet" th:href="@{/dist/css/bootstrap.min.css}">
		<link rel="stylesheet" type="text/css" th:href="@{/css/index.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/animate.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap-datetimepicker.min.css}"/>
		<link rel="stylesheet" type="text/css" th:href="@{/css/order_list.css}"/>
	</head>

	<body>
		<!--导航部分  begin-->
		<div th:replace="common/bookAll::header"></div>
		<!--导航部分 end-->

		<!--最顶端轮播图片 begin-->
		<div th:replace="common/bookAll::carousel"></div>
		<!--最顶端轮播图片 end-->

		<!--订单begin-->
		<!--外层div-->
		<div class="container">
			<!--左边-->
			<div class="container pull-left">
				<ol class="breadcrumb">
					<li>
						<a href="#" class="text-success"><span class="glyphicon glyphicon-list"></span>&nbsp;&nbsp;我的订单</a>
					</li>
				</ol>

				<!--订单查询导航 begin-->
				<div>
					<nav class="navbar navbar-default" role="navigation">
						<div class="navbar-header">
							<a class="navbar-brand" href="#">所有订单</a>
						</div>

						<form class="navbar-form navbar-left" role="search">
							<input type="text" id="queryOrderNum" class="form-control" placeholder="输入订单号进行查询">
							<button type="button" class="btn btn-search" th:onclick="queryOrderData()">
			                  	<span class="text-success">Search</span>&nbsp;&nbsp;<span class="glyphicon glyphicon-search"></span>
			            	</button>
						</form>

						<ul class="nav navbar-nav navbar-left">
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									交易状态
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#" th:onclick="queryOrderDataByStatus('')">全部</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#" th:onclick="queryOrderDataByStatus(2)">已付款</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#" th:onclick="queryOrderDataByStatus(3)">未付款</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#" th:onclick="queryOrderDataByStatus(4)">交易成功</a>
									</li>
									<li class="divider"></li>
								</ul>
							</li>
						</ul>
						<ul class="nav navbar-nav navbar-left">
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									订单排序
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#"  th:onclick="queryOrderDataByOrder('bo.create_date desc')">订单日期降序</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#"  th:onclick="queryOrderDataByOrder('bo.create_date')">订单日期升序</a>
									</li>
									<li class="divider"></li>
								</ul>
							</li>
						</ul>
						<ul class="nav navbar-nav navbar-right">
							<li style="padding-right: 15px;">
								<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">更多筛选条件</a>
							</li>
						</ul>
					</nav>
				</div>
				
				<!--订单查询导航 end-->
				<!--日期控件-->
				<div id="collapseTwo" class="panel-collapse collapse">
					<div class="panel-body">
						<div class="form-group">	
							<div>
								<form class="form-horizontal">
							  		<div class="form-group has-feedback">
							  			<div class="col-md-1" style="padding-top:5px ;">
							  				成交日期:
							  			</div>
										<div class="col-md-3">
											<input type="text" class="form-control" id="datetimepicker" placeholder="开始时间">
											<span class="glyphicon glyphicon-time form-control-feedback"></span>
										</div>
										<div class="col-md-1" style="padding-top:5px ;text-align:center;">
							  				至
							  			</div>
										<div class="col-md-3">
											<input type="text" class="form-control" id="datetimepicker2" placeholder="结束日期">
											<span class="glyphicon glyphicon-time form-control-feedback"></span>
										</div>
										<div class="col-md-3">
											<button type="button" th:onclick="queryDataByDate()" class="btn btn-default">查询&nbsp;&nbsp;<span class="glyphicon glyphicon-search"></button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
				<!--日期控件-->
				
				<!--订单列表的显示和分页-->
				<div id="orderList"></div>
			</div>

		</div>
		<div class="container">
		<hr>
			<!--首页底部信息 begin-->
			<div th:replace="common/bookAll::footer"></div>
		</div>
		<!--end-->
		<script th:src="@{/dist/js/jquery.min.js}"></script>
		<script th:src="@{/dist/js/bootstrap.min.js}"></script>
		<script th:src="@{/js/moment.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/js/bootstrap-datetimepicker.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/js/sweetalert.min.js}"></script>
		<script th:inline="javascript">
			//获取网站的虚拟路径
			var contextPath = [[${#request.getContextPath()}]];
			var pPages = [[${pages}]];
		</script>
		<script type="text/javascript">
			$('#datetimepicker').datetimepicker();
			$('#datetimepicker2').datetimepicker();
		</script>
		<script>
			//显示图书的详细信息
			$(function () {
				$("#orderList").load(contextPath + "/order/getOrderListData",queryData(1,2))
			})

			function queryData(page,pageSize,orderNum,tradeStatus,orderBy,startTime,endTime){
				var query = {};
				query.page = page;
				query.pageSize = pageSize == '' ? 2 : pageSize;
				query.orderNum = orderNum == undefined ? '': orderNum;
				query.tradeStatus = tradeStatus == undefined ? '': tradeStatus;
				query.orderBy = orderBy == undefined ? '': orderBy;
				query.startTime = startTime == undefined ? '' : startTime;
				query.endTime = endTime == undefined ? '' : endTime;
				return query;
			}

			function loadData(page,pageSize){
				$("#orderList").load(contextPath + "/order/getOrderListData",queryData(page,pageSize))
			}

			//跳转到指定页面
			function goPage(pageSize){
				var page = $("#inputPage").val();
				if (page > pPages){
					page=1;
				}
				$("#orderList").load(contextPath + "/order/getOrderListData",queryData(page,pageSize))
			}

			//修改每页的条数
			function loadDataBySize(obj) {
				$("#orderList").load(contextPath + "/order/getOrderListData",queryData(1,obj.value))
			}

			function queryOrderData() {
				var queryOrderNum = $("#queryOrderNum").val();
				$("#orderList").load(contextPath + "/order/getOrderListData",queryData(1,$("#pageSize").val(),queryOrderNum))
			}

			var status = "";
			function queryOrderDataByStatus(type) {
				var queryOrderNum = $("#queryOrderNum").val();
				if (type == 2){
					//已付款
					status=2;
				}else if(type == 3){
					//未付款
					status=1;
				}else if (type == 4){
					//交易成功
					status=3;
				}else {
					status=''
				}
				$("#orderList").load(contextPath + "/order/getOrderListData",queryData(1,$("#pageSize").val(),queryOrderNum,status))
			}

			var order1 = ""
			function queryOrderDataByOrder(order) {
				var queryOrderNum = $("#queryOrderNum").val();
				order1 = order;
				$("#orderList").load(contextPath + "/order/getOrderListData",queryData(1,$("#pageSize").val(),queryOrderNum,status,order))
			}

			function queryDataByDate() {
				var startTime = $("#datetimepicker").val();
				var endTime = $("#datetimepicker2").val();
				var queryOrderNum = $("#queryOrderNum").val();
				if (startTime == "" || endTime == ""){
					swal("提示信息", "请选择开始和结束时间！", "warning")
				}else {
					$("#orderList").load(contextPath + "/order/getOrderListData",queryData(1,$("#pageSize").val(),queryOrderNum,status,order1,startTime,endTime))
				}
			}

		</script>
	</body>
</html>